import React, { Component } from 'react'
import "./MyTabbar.scss"
import { withRouter } from 'react-router-dom';

 class MyTabbar extends Component {
    constructor(props){
        super(props);
        this.state = {
            selectIndex: 0,
            arr: [
                { name: "店铺", classname: "iconfont icon-home" },
                { name: "分类", classname: "iconfont icon-menu" },
                { name: "全部商品", classname: "iconfont icon-cengji" },
                { name: "购物车", classname: "iconfont icon-gouwuche" },
                { name: "个人中心", classname: "iconfont icon-yonghu" },
    
            ]
        }
    }
    fun(index) {
        this.setState({
            selectIndex: index
        },()=>{
            console.log(this.state.selectIndex);
            let routeIndex=this.state.selectIndex
            if(routeIndex===0){
                this.props.history.push("/routertwo/dianpu")
            }else if(routeIndex===1){
                this.props.history.push("/routertwo/fenlei")

            }else if(routeIndex===2){
                this.props.history.push("/routertwo/all")

            }else if(routeIndex===3){
                this.props.history.push("/routertwo/shopcar")

            }else if(routeIndex===4){
                this.props.history.push("/routertwo/user")

            }
        })
    }
    render() {
        return (
            <div className='xiakong'>
                <div className='tabbar'>
                    <ul>
                        {
                            this.state.arr.map((i, index) => {
                                return (
                                    <li className={this.state.selectIndex == index ? "selected" : ""} onClick={() => { this.fun(index) }}>
                                        <span className={i.classname}></span>
                                        <p>{i.name}</p>
                                    </li>
                                )
                            })
                        }

                    </ul>
                </div>
            </div>
        )
    }
}


export default withRouter(MyTabbar)